<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>使用AJAX实现正在加载效果</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script>
	var xmlHttp = new XMLHttpRequest();
	function getSend(o) {
		xmlHttp.open("get", "s2?o=" + o);
		xmlHttp.onreadystatechange = getback;
		xmlHttp.send();
	}
	
	function getback() {
		if(xmlHttp.readyState == 4) {
			document.getElementById("img").style.display = "none";
			if(xmlHttp.status == 200) {
				document.getElementById("div1").innerHTML = xmlHttp.responseText;
			}
		} else {
			document.getElementById("img").style.display = "block";
		}
		
	}
	
	function postSend(o) {
		xmlHttp.open("post", "s2", true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = postback;
		xmlHttp.send("num=" + o);
	}
	function postback() {
		if(xmlHttp.readyState == 4) {
			document.getElementById("img").style.display = "none";
			if(xmlHttp.status == 200) {
				document.getElementById("div2").innerHTML = xmlHttp.responseText;
			}
		} else {
			document.getElementById("img").style.display = "block";
		}
	}
	
	</script>
  </head>
  
  <body>
    This is my JSP page. <br>
    
    get:<input type="text" onkeyup="getSend(this.value)" />
    <div id="div1"></div>
    <img id="img" style="display:none" src="loading.gif" width="100" height="100"/>
    post:<input type="text" onkeyup="postSend(this.value)"/>
    <div id="div2"></div>
  </body>
</html>
